<template>
  <div id="cesiumContainerBox" />
</template>

<script>
export default {
    name: 'Demo',
    components: {},
    mounted() {
        this.initViewer()
    },
    methods: {
        async initViewer() {
           const tokenAry = [
                "c2c4953c78963c35573b494febb08b32",
                "c74a0b14c0fc45d7b515b26d9a236d58",
                "78b7e977ed19749c56d7be6e1c0eac6f",//
                "5556dcf35dbb53babedd374ee1368584",
                "9d853b9feafa636aa0ba4eabd7b53922",
                "d91effcbb2ae48612aa4cbe0695732ea",
                "3616d574a15fd80ce4fb6614196f27ee",
                "9b9456c866943e2c5631bbb19f11d0f7",//
                "c25a0db67c2010f83d8ab1f75c9e8fd1",
                "d1a85c9d7c4680c2b8df84a608e7b87f",
                "faa364572ae2a7c98fa3189c209c1f20",
                "64d52b30b9283bf912f5e04632648551",
                "0ab2a9a56ccc92d3fd526ab2399c96b9",//
                "dadd61892ec148992d3467a780a7f2f2",
                "61f346f58daa68569ace85d8e73f01a4",
                "1b371d46bf8bfd76e6625c15f72c61bd",
                "4d1b92cd9d7f6874f43da229002c35b2",
                "140fe969ea863824f97c8ba5ce54be97",//
            ];
            const myToken = tokenAry[Math.floor(Math.random() * tokenAry.length)];
                this.GD_BJ = new Cesium.WebMapTileServiceImageryProvider({
                url: `http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${myToken}`,
                layer: "tdtBasicLayer",
                style: "default",
                format: "image/jpeg",
                tileMatrixSetID: "GoogleMapsCompatible",
                maximumLevel: 18
                });
                this.GD_SL = new Cesium.WebMapTileServiceImageryProvider({
                url: `http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${myToken}`,
                layer: "tdtBasicLayer",
                style: "default",
                format: "image/jpeg",
                tileMatrixSetID: "GoogleMapsCompatible",
                maximumLevel: 18
                });
            
            var viewer = new Cesium.Viewer('cesiumContainerBox', {
                imageryProvider: this.GD_SL,
                animation: false,//是否创建动画小器件，左下角仪表
                baseLayerPicker: false,//是否显示图层选择器
                creditsDisplay: false,
                fullscreenButton : false,//是否显示全屏按钮
                geocoder: false,
                homeButton : false,//是否显示Home按钮
                infoBox:false,//点击要素之后显示的信息,默认true
                navigationHelpButton: false,//是否显示右上角的帮助按钮
                navigation: true, // 显示导航控件
                sceneModePicker : false,//是否显示3D/2D选择器
                selectionIndicator:false,//选中元素显示,默认true
                showSelection:false,
                shouldAnimate: false,
                timeline: false,//是否显示时间轴  
            });
            viewer.scene.sun.show = false;
            viewer.scene.moon.show = false;
            viewer.scene.skyBox.show = false; //关闭天空盒，否则会显示天空颜色
            viewer.scene.globe.show = true;
            viewer.imageryLayers.addImageryProvider(this.GD_BJ)
            viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
            viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
            // viewer.camera.flyTo({
            //   destination: Cesium.Cartesian3.fromDegrees(
            //     120.19193597248844,
            //     30.229266878915208,
            //     65000.0
            //   ),
            //   orientation: {
            //     heading: Cesium.Math.toRadians(0.0), // 左右方向
            //     pitch: Cesium.Math.toRadians(-90.0), // 上下方向
            //     roll: Cesium.Math.toRadians(0), // 镜头（屏幕）到定位目标点（实体）的距离
            //   },
            //   duration: 3, // 执行定位动画的时间
            // });
            
            window.viewer = viewer; 
        }
    }
}
</script>

<style>
#cesiumContainerBox {
    width: 100%;
    height: 100%;
}
</style>